<template>
    <div>

        <div class="index-wrap">
            <div class="index-left">
                <div class="index-left-block" style="background-color: #ffffff">
                    <div class="artwork-category-panel__category-title">
                        作品类别
                    </div>

                    <span class="allSpan">
                        <a @click="selectAllWorks()" style="cursor: pointer;color:#222222;text-decoration: none">
                        全部</a></span>
                    <span class="categoryName" v-for="category in categories">
                        <el-divider direction="vertical"></el-divider>
                    <a @click="selectWorkCategories(category)" style="cursor: pointer;color:#222222;text-decoration: none">{{category.categoryName}}</a>
                </span>
                    <el-divider></el-divider>
                    <div v-for="category in categories">
                        <div class="workTitle">
                            {{category.categoryName}}
                            <br/><br/>
                        </div>
                        <span v-for="category2 in category.categories">
                        <el-tag @click="selectWorkCategories(category2)" class="workItem">{{category2.categoryName}}</el-tag>
                    </span>
                        <el-divider></el-divider>
                    </div>

                </div>
            </div>
        </div>

        <div>
            <el-row v-if="hotWorksInfo.length !== 0" class="swiper-painter-item">
                <el-card class="swiper-painter-cards" v-for="workInfo in hotWorksInfo">
                    <button class="work-button" style="border: #ffffff" @click="workDetail(workInfo)">
                        <div v-if="workInfo.workFileType === 1">
                            <img  class="image" :src="workInfo.workFilename"/>
                        </div>
                        <div v-else @click="workDetail(work)">
                            <video :poster="workInfo.poster" :controls="true" class="video_fo" :src="workInfo.workFilename"></video>
                        </div>
                        <div class="work-div">
                            <span class="painter-item-name">
                                {{workInfo.workName}}
                            </span>
                        </div>
                        <div class="introduction-motto">
                                    <span class="author-span">
                                        <img class="work-user-img" :src="workInfo.userImg">
                                        <span class="author-span">
                                            {{workInfo.username}}
                                        </span>

                                    </span>
                            <span class="star-span">
                                    <i class="icon-favorites"></i>
                                    {{workInfo.workLikesNums}}
                                    </span>
                        </div>
                    </button>

                </el-card>

            </el-row>
        </div>


    </div>
</template>

<script>
    import {
        addWorkComment,
        getWorkComment,
        getWorkInfoById,
        searchWorksInfoByCategory
    } from "../../assets/api/workInfoApi";
    import LeftNav from "../../components/LeftNav";
    import HeaderNav from "../../components/HeaderNav";
    import {selectCategories} from "../../assets/api/categoryApi";


    export default {
        data() {
            return {
                hotWorksInfo: [{}],
                centerDialogVisible: false,
                workImg: '',
                workInfo: {},
                comments: [],
                comment:'',
                scrolls:true,
                categories:[]
            }
        },
        methods: {
            selectAllWorks(){
                this.$router.push('/hotWork');
            },
            selectHotWorksInfo() {
                let type = 'work_likes_nums';
                let data = {};
                data.categoryId = this.$route.query.id;
                searchWorksInfoByCategory(type, data).then((res)=>{
                    if (res.code === 200){
                        this.hotWorksInfo = res.data;
                    }

                })
            },
            workDetail(work) {
                this.$router.push({path:'/workDetail',query:{id:work.workId}});
            },
            selectWorkCategories(category){
                this.$router.push({path:'/hotWorkCategory',query:{type:'work_likes_nums',id:category.categoryId}});
            },
            showCategories(){
                selectCategories(this.data).then((res)=>{
                    this.categories = res.data;
                })
            },
        },
        watch: {
            $route(to, from) {
                location.reload();
            }
        },
        created() {
            this.selectHotWorksInfo();
            this.showCategories();
        },

    }
</script>

<style scoped>
    @import "../../assets/fonts/iconfont.css";

    .index-wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .index-left {
        float: left;
        text-align: left;
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
    }

    .index-left-block {
        margin: 15px;
        width: 300px;
        box-shadow: 0 0 1px #ddd;
    }


    .workTitle{
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 10px;
    }

    .artwork-category-panel__category-title {
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
        font-weight: 700;
        margin-top: 10px;
    }

    .workItem{
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .categoryName{
        font-size: 14px;
    }
    .allSpan{
        margin-left: 10px;
    }

    .swiper-painter-item {
        margin-left: 180px;
        overflow: hidden;
        padding: 0 12px;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }

    .swiper-painter-cards {
        margin-top: 15px;
        height: 400px;
        margin-left: 10px;
        width: 300px;
    }

    .painter-item-name {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 14px;
        color: #333;
    }

    .introduction-motto {
        background-color: #ffffff;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .image {
        width: 100%;
        height: 250px;
        display: block;
        margin: 0 auto
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .star-span {
        color: #adb3fb;
        float: right;
        background-color: #ffffff;
        margin-top: 20px;
    }

    .author-span {
        color: #777;
        font-size: 14px;
        max-width: 154px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }
    .work-user-img {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }
    .work-div {
        background-color: #ffffff;
        margin-top: 20px;
    }
    .work-button {
        background-color: #ffffff;
        border: #fff;
        text-align: center;
    }
    a {
        text-decoration: none;
    }
    .video_fo {
        position: relative;
        width: 283px;
        height: 200px;
        left: -20px;
    }
</style>

